<template>
  <el-dialog
    title="二维码"
    :visible.sync="visible"
    width="400px"
    show-close
    :before-close="handleClose"
  >
    <div class="wrapper">
      <el-form
        class="form"
        size="small"
        label-position="left"
        :model="form"
        label-suffix=":"
      >
        <el-form-item v-if="leftNum" label-width="72px" label="剩余张数">
          <span>{{ leftNum }}</span>
        </el-form-item>
        <el-form-item label="密 码" label-width="60px">
          <div class="flex">
            <el-input
              v-model="form.codeKey"
              placeholder="请输入密码"
              clearable
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 12px"
              @click="handleConfirmPwd"
              >确定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div class="code-img">
        <img class="img" :src="qrCodeUrl" alt="" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getQrCode, removeCode } from "@/api/index";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    applyId: {
      type: [String, Number],
      default: "",
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.checkQrCode();
      }
    },
  },
  data() {
    return {
      qrCodeUrl: "",
      codeKey: "",
      showEditCodeKey: false,
      form: {
        codeKey: "",
        codeId: "",
      },
      leftNum: "",
    };
  },
  methods: {
    handleConfirmPwd() {
      removeCode({ ...this.form }).then((res) => {
        if (res.code == 200) {
          this.$message.success(
            `${this.form.codeKey ? "密码修改成功" : "密码删除成功"}`
          );
        }
      });
    },
    checkQrCode() {
      const params = {
        applyId: this.applyId,
      };
      getQrCode(params).then((res) => {
        if (res.code == 200) {
          this.qrCodeUrl = res.data.codePhoto;
          this.form.codeKey = res.data.codeKey;
          this.form.codeId = res.data.codeId;
          this.leftNum = res.data.leftNum;
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  .form {
    margin-left: 5px;
    .edit {
      cursor: pointer;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .code-img {
    display: flex;
    justify-content: center;
  }
  .img {
    width: 200px;
    height: 200px;
  }
}
</style>
